<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
            <el-form-item label="工号" prop="userId" >
                <el-input placeholder="请输入工号" v-model="state.queryForm.userId" />
            </el-form-item>
            <el-form-item label="姓名" prop="userName" >
                <el-input placeholder="请输入姓名" v-model="state.queryForm.userName" />
            </el-form-item>
            <el-form-item label="试题岗位" prop="partPostName">
                <el-input placeholder="请输入岗位名称" v-model="state.queryForm.partPostName" />
            </el-form-item>
<!--            <el-form-item label="专业名称" prop="zymcName">-->
<!--                <el-select @change="getitem3" v-model="state.queryForm.zymcName" filterable clearable multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">-->
<!--                    <el-option v-for="item in options2"  :key="item.zymcId" :label="item.zymcName" :value="item.zymcName"/>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="关键点" prop="keyPoint">-->
<!--                <el-select @change="getitem4" v-model="state.queryForm.keyPoint" filterable multiple clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">-->
<!--                    <el-option v-for="item in keypointsListData" :key="item.keyId" :label="item.keyPoint" :value="item.keyPoint"/>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="专业名称" prop="zymcName">
                <el-select @change="getItem3" v-model="state.queryForm.zymcName" filterable clearable multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in options2"   :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="关键点" prop="keyPoint">
                <el-select @change="getItem2" v-model="state.queryForm.keyPoint" filterable multiple clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 90%;">
<!--                    <el-option v-for="item in keypointsListData"  :key="item.keyId" :label="item.zymcName+'-'+item.keyPoint" :value="item.keyId"/>-->
                    <el-option v-for="item in keypointsListData" :key="item.keyId" :label="item.zymcName ? (item.zymcName + '-' + (item.keyPoint || '')) : ''" :value="item.keyId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="题型" prop="questionType">
                <el-select v-model="state.queryForm.questionType" laceholder="请选择题型" clearable >
                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in tkgl_topic_type" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题干" prop="stem" >
                <el-input placeholder="请输入题干" v-model="state.queryForm.stem" />
            </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              <el-button plain :visible.sync="dialogVisible" @click="association" >配置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
<!--      <el-row>-->
<!--        <div class="mb8" style="width: 100%">-->
<!--          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'train_tkglWrongQuestion_add'">新 增</el-button>-->
<!--          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'train_tkglWrongQuestion_del'" @click="handleDelete(selectObjs)">删除</el-button>-->
<!--          <right-toolbar v-model:showSearch="showSearch" :export="'train_tkglWrongQuestion_export'" @exportExcel="exportExcel" class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>-->
<!--        </div>-->
<!--      </el-row>-->
      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
      :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="userId" label="工号"  show-overflow-tooltip/>
          <el-table-column prop="userName" label="人员姓名"  show-overflow-tooltip/>
          <el-table-column prop="partOrgName" label="参与组织名称" width="170"/>
          <el-table-column prop="partPostName" label="试题岗位名称"  show-overflow-tooltip/>
          <el-table-column prop="correctAnswer" label="正确答案文本"  show-overflow-tooltip/>
          <el-table-column prop="userAnswer" label="参考人作答文本"  show-overflow-tooltip/>
          <el-table-column prop="examType" label="考试类型"  show-overflow-tooltip/>
<!--          <el-table-column prop="personalPostName" label="个人岗位名称"  show-overflow-tooltip/>-->
          <el-table-column prop="questionType" label="题型" show-overflow-tooltip>
            <template #default="scope">
                <dict-tag :options="tkgl_topic_type" :value="scope.row.questionType"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="stem" label="题干"  show-overflow-tooltip/>
          <el-table-column prop="zymcName" label="专业名称"  show-overflow-tooltip/>
          <el-table-column prop="keyPoint" label="关键点" width="170"/>
          <el-table-column prop="readouts" label="解析"  show-overflow-tooltip/>
<!--          <el-table-column prop="answer" label="答案"  show-overflow-tooltip/>-->
          <el-table-column prop="difficulty" label="难易程度"  show-overflow-tooltip/>
          <el-table-column prop="createTime" label="创建时间"  show-overflow-tooltip/>
          <el-table-column prop="updateTime" label="修改时间"  show-overflow-tooltip/>
          <!--          <el-table-column prop="relatedInfo" label="关联资料"  show-overflow-tooltip/>-->
<!--          <el-table-column prop="optionA" label="选项A"  show-overflow-tooltip/>-->
<!--          <el-table-column prop="optionB" label="选项B"  show-overflow-tooltip/>-->
<!--          <el-table-column prop="optionC" label="选项C"  show-overflow-tooltip/>-->
<!--          <el-table-column prop="optionD" label="选项D"  show-overflow-tooltip/>-->
<!--          <el-table-column label="操作" width="150">-->
<!--             <template #default="scope">-->
<!--                <el-button icon="ed2it-pen" text type="primary" v-auth="'train_tkglWrongQuestion_edit'" @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>-->
<!--                <el-button icon="delete" text type="primary" v-auth="'train_tkglWrongQuestion_del'" @click="handleDelete([scope.row.id])">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
      <!-- 配置 -->
      <el-dialog v-model="dialogVisible" title="选择次数设定" :before-close="handleClose" width="50%">
          <el-row>
              <el-form :model="queryForm1">
                  <el-form-item label="次数设定" prop="removeNumber" label-width="120px">
                      <el-input-number v-model="queryForm1.removeNumber" :min="1" :max="100" />
                  </el-form-item>
              </el-form>
          </el-row>
          <template #footer>
              <div class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" :visible.sync="dialogVisible" @click="onSubmit">确定</el-button>
              </div>
          </template>
      </el-dialog>

  </div>
</template>

<script setup lang="ts" name="systemTkglWrongQuestion">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList, delObjs,allocation,setup} from "/@/api/train/tkglWrongQuestion";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
import { reactive, ref } from 'vue';
import { professionalnameList } from '/@/api/train/jnglProfessionLevel';
import mittBus from '/@/utils/mitt';
import { getEditList, informationList } from '/@/api/train/kszlData';
import { keypointsList } from '/@/api/train/jnglKeyPoints';
import { getKeyPointListByZymcIds } from '/@/api/train/ksglExamList';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

const { tkgl_topic_type } = useDict('tkgl_topic_type')
// 定义变量内容
const formDialogRef = ref()
// 搜索变量
const queryRef = ref()
const dialogVisible = ref(false)
const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const options2 =reactive([{}])
const keypointsListData = reactive([{}])
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: fetchList
})
const queryForm1 = reactive ({
	removeNumber:0,// 初始值
})
const zymcArr = ref([])
//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
	tableStyle
} = useTable(state)
onMounted(()=>{
	getProfessionalName()
})
// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}
// 查询错题移除次数
const association = async () => {
	dialogVisible.value = true;
	try {
		const response = await allocation();
		console.log(response,'配置项');
        if (response && response.data) {
            queryForm1.removeNumber = response.data; // 假设response.data.yourDataField是你要设置的值
        }
		}catch (error) {
		console.error('Error fetching data:', error);
	}
}
//设置错题移除次数
const onSubmit = async ()=> {
	setup(queryForm1).then((res) => {
		console.log(queryForm1,'调用后打印');
		console.log(res,'res');
	})
	dialogVisible.value = false;
}
// 导出excel
const exportExcel = () => {
  downBlobFile('/train/tkglWrongQuestion/export', Object.assign(state.queryForm, { ids: selectObjs }), 'tkglWrongQuestion.xlsx')
}

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({ id }) => id);
  multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: string[]) => {
  try {
    await useMessageBox().confirm('此操作将永久删除');
  } catch {
    return;
  }

  try {
    await delObjs(ids);
    getDataList();
    useMessage().success('删除成功');
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
const getItem3=(val:any) =>{
	zymcArr.value = val
	state.queryForm.zymcId = val.join(',')
	state.queryForm.keyPoint = []
	getKeypointsList()
}
const getItem2=(val:any) =>{
	state.queryForm.keyPointId = val.join(',')
}
//专业名称
const  getProfessionalName = () => {
	professionalnameList().then((res) => {
		Object.assign(options2, res.data)
		console.log("专业名称",options2);
	});
};
const  getKeypointsList = () =>{
	keypointsListData.length = 0
	const ids = {
		zymcIds:  zymcArr.value
	}
	// console.log(' queryForm----', ids,queryForm)
	getKeyPointListByZymcIds(ids).then((res: any) => {
		Object.assign(keypointsListData, res.data)
	});
}
const getitem4 = (val :any) =>{
	state.queryForm.keyId = [] // 获取keyId数组
	const keyPoint =val
	keypointsListData.forEach(option => {
		if (keyPoint.includes(option.keyPoint)) {
		state.queryForm.keyId.push(option.keyId);
		}
	});
	console.log(keyPoint.join(','),'关键点');
	console.log( state.queryForm.keyId, 'keyId');
	console.log(keyPoint, 'val'); // 这和上面的selectedNames是一样的
	// 更新form中的majorName字段，如果你需要的话
	state.queryForm.keyPoints = keyPoint.join('/');
}

</script>
